
  <template>
    <div class="common-layout">
      <div class="head">
        <div class="head">
          <div class="head1">
            <span>关键词：</span>
            <el-input v-model="keywords" placeholder="姓名或手机" />
          </div>
              <div class="head1">
                <span>状态：</span>
                <!-- 0：未交费 1：未发药2：已完成3：已退款 5：查询全部 -->
                <el-select v-model="chargeStatus" placeholder="全部">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
          <el-button type="primary" @click="searchCharge(1)">查询</el-button>
        </div>
      </div>
    </div>
    <!--表格-->
    <el-table :data="getChargeMsg" style="width: 100%" table-layout="fixed">
      <el-table-column   label="序号" property="$index" width="80">
      </el-table-column>
      <el-table-column label="门诊编号" property="id" width="180">
        <template #default="scope">
          <span class="id" @click="script(scope.row)" >{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="患者姓名" property="patientBankRef.bankName" width="80">
      </el-table-column>
      <el-table-column label="性别" property="patientBankRef.sex" width="80">
      </el-table-column>
      <el-table-column label="年龄" property="patientBankRef.age" width="80">
      </el-table-column>
      <el-table-column label="电话" property="patientBankRef.phone" width="150">
      </el-table-column>
      <el-table-column label="医生姓名" property="doctor" width="80">
      </el-table-column>
      <el-table-column label="就诊日期" property="seeDoctorTime" width="200">
      </el-table-column>
      <el-table-column label="状态" width="80" >
        <template #default="scope" >
          <!-- 0：未交费 1：未发药2：已完成3：已退款 5：查询全部 -->
          <span @click="messageDia(scope.row)" class="red normal" v-if="scope.row.status==0">未交费</span>
          <span @click="messageDia(scope.row)" class="green normal" v-if="scope.row.status==1">未发药</span>
          <span @click="messageDia(scope.row)" class="normal" v-if="scope.row.status==2">已完成</span>
          <span @click="messageDia(scope.row)" class="normal" v-if="scope.row.status==3">已退款</span>
        </template>
      </el-table-column>
      <el-table-column label="金额" property="money" width="100" align="center">
        <template #default="scope">
          {{ scope.row.money }}.00元
        </template>
      </el-table-column>
      <el-table-column label="操作" width="auto">
        <template #default="scope">

          <el-button type="primary" v-if="scope.row.status==0" size="small" @click="payClick(scope.row)">收费</el-button>
          <el-button type="success"   v-if="scope.row.status==1" size="small" @click="releseDrug(scope.row)">发药</el-button>
          <el-button type="warning"  v-if="scope.row.status==1" size="small" @click="returnClick(scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pages">
      <div>
        <el-pagination
          small
          background
          @current-change="searchCharge"
          layout="prev, pager, next"
          :total="store.state.chargeDispensing.chargeMsgTotal"
          class="mt-4"
        />
      </div>
    </div>
    <el-dialog
    v-model="returnDialog"
    title="退款"
    width="30%"
    align-center
  >
    <span>是否退款？(线上退款金额将原路返回)</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="returnDialog = false">取消</el-button>
        <el-button type="primary" @click="returnMoney">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="payDialog"
    title="支付宝支付"
    width="30%"
    align-center
  >
    <span>支付宝沙盒测试支付</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="payDialog = false">取消</el-button>
        <el-button type="primary" @click="payMoney">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="historyDia"
    :title="msgTitle"
    width="60%"
    align-center
    :modal="false"
  >
  <vueC :isAdd="false"/>
</el-dialog>
  <el-dialog
    v-if="messageDiaObj&&tradeMsg.tradeInfo"
    v-model="messageDialog"
    :title="msgTitle"
    width="30%"
    align-center
    :modal="false"
  >
  <div class="msgContent">
        <span class="title">信息概览</span>
        <span>总额：￥{{ messageDiaObj.money }}</span>
        <span>时间：{{ messageDiaObj.seeDoctorTime }}</span>
        <span v-if="messageDiaObj.status==0">状态：未支付</span>
        <span v-if="messageDiaObj.status==1">状态：已支付</span>
        <span v-if="messageDiaObj.status==2">状态：已完成</span>
        <span v-if="messageDiaObj.status==3">状态：已退款</span>
        <span class="title">订单列表</span>
        <template v-if="tradeMsg.tradeInfo.recordsRef.rxs.length" v-for="item in tradeMsg.tradeInfo.recordsRef.rxs">
          <span>{{item.rxName}} <label>{{ item.price }}.00元</label></span>
        </template>
        <span v-else>无记录</span>
        <span class="title">支付记录</span>
        <template v-if="tradeMsg.tradeInfoPay.length" v-for="item in tradeMsg.tradeInfoPay"  :key="item.id">
          <span>支付宝 {{item.tradeKind?"挂号":"看诊"}} {{item.tradeDate}} <label>{{ item.tradeMoney }}.00元</label></span>
        </template>
        
        <span v-else>无记录</span>
        <span class="title">已退款记录</span>
        <template v-if="tradeMsg.tradeInfoOut.length" v-for="item in tradeMsg.tradeInfoOut"  :key="item.id">
          <span>{{item.payKind?"支付宝":"现金"}} {{item.tradeDate}} <label>{{ item.tradeMoney }}.00元</label></span>
        </template>
        <span v-else>无记录</span>
    </div>
  </el-dialog>
  </template>
  
  
  <script lang="ts" setup>
  import router from "@/router";
  import vueC from "@/components/newly/c.vue"
  import { ElMessage } from "element-plus";
import { computed, onMounted, ref } from "vue";
import { useStore, mapGetters, mapMutations } from "vuex";
  const store = useStore();  
  const getChargeMsg = computed(mapGetters(["getChargeMsg"]).getChargeMsg.bind({$store: store,}))
  const tradeMsg = computed(mapGetters(["getTradeMsg"]).getTradeMsg.bind({$store: store,}))
  const showTradeInfo = mapMutations(["showTradeInfo"]).showTradeInfo.bind({$store: store,})
  const showTradeInfoPay = mapMutations(["showTradeInfoPay"]).showTradeInfoPay.bind({$store: store,})
  const showTradeInfoOut = mapMutations(["showTradeInfoOut"]).showTradeInfoOut.bind({$store: store,})
  const setChargeMsg = mapMutations(["setChargeMsg"]).setChargeMsg.bind({$store: store,})
  const releseDrugById = mapMutations(["releseDrugById"]).releseDrugById.bind({$store: store,})
  const scriptBydiaId = mapMutations(["scriptBydiaId"]).scriptBydiaId.bind({$store: store,})
  const returnMoneyById = mapMutations(["returnMoneyById"]).returnMoneyById.bind({$store: store,})
  const payMoneyById = mapMutations(["payMoneyById"]).payMoneyById.bind({$store: store,})
  const setInfoById = mapMutations(["setInfoById"]).setInfoById.bind({$store: store,})

  const keywords = ref(null);
  const chargeStatus = ref(null);
  const returnMsg = ref(null)
  const payMsg = ref(null)
  const returnDialog = ref(false);
  const payDialog = ref(false);
  const messageDialog = ref(false);
  const messageDiaObj = ref(null);
  const historyDia = ref(false)
  const msgTitle = ref("");
  const current = ref(1);
  const options = [
    {
      value: "5",
      label: "全部",
    },
    {
      value: "0",
      label: "未收费",
    },
    {
      value: "1",
      label: "未发药",
    },
    {
      value: "3",
      label: "已退款",
    },
    {
      value: "2",
      label: "已完成",
    },
  ];
  
  onMounted(()=>{
    setChargeMsg({currentPage:current.value,
      pageSize:10,
      keywords:null,
      status:null
    });
  })
  const searchCharge = (currentPage:any)=>{
    console.log(chargeStatus.value);
    if(keywords.value==""){
      keywords.value=null;
    }
    current.value = currentPage
    setChargeMsg({currentPage:currentPage,
      pageSize:10,
      keywords:keywords.value,
      status:chargeStatus.value
    });
  }
  const releseDrug = (row:any)=>{
    releseDrugById(row.id)
    ElMessage({
    message: '发药成功',
    type: 'success',
  })
  setChargeMsg({currentPage:current.value,
      pageSize:10,
      keywords:null,
      status:null
    });
  }
  const script = (row:any)=>{
    setInfoById(row)
    historyDia.value=true;
  }
  const returnClick = (row:any)=>{
    returnMsg.value = row;
    returnDialog.value=true;
  }
  const payClick = (row:any)=>{
    payMsg.value = row;
    payDialog.value=true;
  }
  const payMoney = ()=>{
    payDialog.value=false
    if(store.state.router.userData.userInfo.empUserName==undefined){
      ElMessage({
        message: '请登录',
        type: 'error',
      })
      return 
    }
    window.location.href="/alipay?message="+store.state.router.userData.userInfo.empUserName+
      "&orderId="+payMsg.value.id+
      "&price="+payMsg.value.money+
      "&tradeType=0"
    ElMessage({
    message: '支付成功',
    type: 'success',
    })
  }
  const returnMoney = ()=>{
    returnDialog.value=false
    if(store.state.router.userData.userInfo.empUserName==undefined){
      ElMessage({
        message: '请登录',
        type: 'error',
      })
      return 
    }
    returnMoneyById({
      message:store.state.router.userData.userInfo.empUserName,
      orderId:returnMsg.value.id,
      price:returnMsg.value.money,
      tradeType :0
    })
    setChargeMsg({currentPage:current.value,
      pageSize:10,
      keywords:null,
      status:null
    });
    ElMessage({
    message: '退款成功',
    type: 'success',
    })
  }
  const messageDia=(row:any)=>{
    msgTitle.value=row.patientBankRef.bankName+"--"+row.seeDoctorTime+" "+"[交易信息]"
    messageDialog.value=true;
    messageDiaObj.value = row;
    showTradeInfo(row)
  }
  </script>
  
  <style lang="less" scoped>
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #676a6d;
    background-color: #f3f5f8;
  }
  
  .head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: "sans-serif";
    color: #676a6d;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
    width: 100%;
  }
  
  .head1 {
    padding: 10px;
    margin-right: 5px;
  }
  
  .el-input {
    width: 180px;
  }
  .pages {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .id{
    cursor: pointer;
    color: #3287b2;
  }
  .id:hover{
    color: rgb(59, 152, 200);
    
  }
  .normal{
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 60px;
    height: 25px;
  }
  .normal{
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 60px;
    height: 25px;
  }
  .red{
    background-color: red;
    color: #fff;
  }
  .green{
    
    background-color: #0ca818;
    color: #fff;
  }
  .msgContent{
    border: 1px solid #444;
    padding: 8px;
  }
  .msgContent>span{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    height: 40px;
    font-size: 16px;
  }
 
  .msgContent>.title{
    width: 80px;
    height: 40px;
    color: #fff;
    background-color: #00aaff;
    justify-content: center;
    margin-top: 10px;
  }
  </style>